<template>
  <div class="findhouse-page">
    <div class="search">
      <van-icon
        size="28"
        name="arrow-left"
        @click="$router.back()"
        style="margin: 0 8px"
        color="#fff"
      />
      <div class="left">
        <van-button to="/citylist" style="width: 80px">
          {{ nowCity ? nowCity.label : "北京" }}
          <i style="font-size: 12px; transform: rotate(90deg)">></i>
        </van-button>
        <van-search
          v-model="value"
          style="width: 230px; background-color: #fff"
          placeholder="请输入小区或者地址"
        />
      </div>
      <van-icon
        size="36"
        color="#fff"
        style="margin-top: 3px; margin-left: 10px"
        name="home-o"
      />
    </div>
    <!-- :title-class="{check: conditionForm.area || conditionForm.subway}" -->
    <!-- :title-class="{check: conditionForm.rentType!== null}" -->
    <!-- :title-class="{check: conditionForm.price}" -->
    <!-- :title-class="{check: conditionForm.more.length}" -->
   <div class="condition">
      <van-dropdown-menu :overlay="false" >
        <van-dropdown-item title="区域" ref="area">
          <van-picker
            show-toolbar
            :columns="areaSubway"
            @confirm="handleArea"
            @cancel="$refs.area.toggle(false)"
          />
        </van-dropdown-item>
        <van-dropdown-item title="方式" ref="renway" >
          <van-picker
            show-toolbar
            :columns="rentWay"
            @confirm="handleWay"
            @cancel="$refs.renway.toggle(false)"
          />
        </van-dropdown-item>
        <van-dropdown-item title="租金" ref="price" >
          <van-picker
            show-toolbar
            :columns="rentPrice"
            @confirm="handlePrice"
            @cancel="$refs.price.toggle(false)"
          />
        </van-dropdown-item>
        <van-dropdown-item title="筛选" ref="filter" 
        @open="show = true" 
        >
        </van-dropdown-item>
      </van-dropdown-menu>
      <van-popup
        v-model="show"
        position="right"
        @close="handleClose"
        :style="{
          zIndex: 5555,
          height: '100%',
          width: '75%',
          right: 0,
        }"
      >
        <div class="content">
          <div
            v-for="(item, index1) in moreDetail"
            :key="index1"
            :style="{ zIndex: 9999 }"
          >
            <div class="header">
              {{ index1 }}
            </div>
            <div class="group">
              <div
                class="item"
                v-for="(con, index2) in item"
                :key="index2"
                :class="{ active: conditionForm.more.includes(con.value) }"
                @click="handleFilter(con, index1)"
              >
                {{ con.label }}
              </div>
            </div>
          </div>
          <div class="footer" v-show="moreDetail['户型']">
            <div class="cancel" @click="clearDetail">清除</div>
            <div class="confirm" @click="confirm">确定</div>
          </div>
        </div>
      </van-popup>
    </div>
     <van-empty v-if="!houseList.length">
        <div>
      <span style="color: #00c178">暂无数据</span>
        </div>
     </van-empty>
    <div class="house-list" v-else>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <OneHouse
          :item="item"
          v-for="(item, index) in houseList"
          :key="index"
        ></OneHouse>
      </van-list>
    </div>
     <div class="loading" v-if="showLoading">
      <van-loading size="40px" color="#333">加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import OneHouse from '@/components/oneHouseList.vue'
import { houseinfo ,getHouseList, getHouseCondition} from "@/api/citymsg";
import { getCity } from "@/api/cityCode";
export default {
  name: "findhouse",
  components:{
    OneHouse,
  },
  data() {
    return {
      value: "",
      showLoading:true,
      moreDetail: {},
      show: false,
      activeId: 1,
      activeIndex: 0,
      loading: false,
      finished: false,
      houseList: [],
      area: [],
      areaSubway: [], //区域数
      rentWay: [], //方式数据
      rentPrice: [], //价格数据
      conditionForm: {
        cityId: "",
        stat: 1,
        subway: '',
        end: 20,
        rentType: this.$route.query.type || null,
        price: null,
        more: [],
        area: ''
      },
    }
  },
  async created() {
   this.conditionForm.cityId = this.id;
    const res = await getHouseList(this.conditionForm);
    this.houseList.push(...res.body.list);
    this.showLoading = false
    const { body } = await getHouseCondition(this.id);
    // console.log(body)
    const {
      area,
      subway,
      rentType,
      price,
      oriented,
      floor,
      characteristic,
      roomType,
    } = body;
    this.area = area.children
    // 处理区域数据
    this.areaSubway[0] = { text: area.label, children: [] };
    area.children.forEach((town, index) => {
      this.areaSubway[0].children.push({
        text: town.label,
        vlaue: town.value,
        children: [],
      });
      if (town.children) {
        town.children.forEach((district) => {
          this.areaSubway[0].children[index].children.push({
            text: district.label,
            value: district.value,
          });
        });
      }else{
        this.areaSubway[0].children[0].children = [{text:null}]
      }
    });
    this.areaSubway[1] = { text: subway.label, children: [] };
    subway.children.forEach((way) => {
      this.areaSubway[1].children.push({
        text: way.label,
        value: way.value,
        children: [
          {
            text:null
          }]
      });
    });

    // 处理方式数据
    rentType.forEach((item) => {
      this.rentWay.push({
        text: item.label,
      });
    });
    // 处理价格数据
    price.forEach((item) => {
      this.rentPrice.push({
        text: item.label,
        value: item.value
      });
    });
    // 处理筛选数据
    this.moreDetail["户型"] = [];
    roomType.forEach((item) => {
      this.moreDetail["户型"].push(item);
    });
    this.moreDetail["朝向"] = [];
    oriented.forEach((item) => {
      this.moreDetail["朝向"].push(item);
    });
    this.moreDetail["楼层"] = [];
    floor.forEach((item) => {
      this.moreDetail["楼层"].push(item);
    });
    this.moreDetail["房屋亮点"] = [];
    characteristic.forEach((item) => {
      this.moreDetail["房屋亮点"].push(item);
    });
  },

  computed: {
    nowCity() {
      const res1 = getCity();
      return res1;
    },
    city(){
      const res2 = getCity();
      return res2.label;
    },
    id(){
      const res3 = getCity();
      return res3.id;
    }
  },

  methods: {
     // 触底加载
    async onLoad() {
      // console.log(1)
      const res = await getHouseList(this.conditionForm);
      this.loading = false;
      this.conditionForm.start += 20;
      this.conditionForm.end += 20;
      this.houseList.push(...res.body.list);
      if (this.conditionForm.end >= res.body.count) {
        this.finished = true;
      }
        console.log(this.finished);
    },
    handleArea(val) {
      console.log(val)
      if(val[0] === '区域'){
        const target = this.areaSubway[0].children.find(item=>item.text == val[1])
        this.conditionForm.area = target.vlaue
      }else{
        const target = this.areaSubway[1].children.find((item)=> item.text == val[1])
        this.conditionForm.subway = target.value
      }
      this.getData()
      this.$refs.area.toggle(false);
    },
    handleWay(val) {
      this.$refs.renway.toggle(false);
      if (val.text === "整租") {
        this.conditionForm.rentType = true;
      } else if (val.text === "合租") {
        this.conditionForm.rentType = false;
      } else {
        this.conditionForm.rentType = null;
      }
      this.getData();
    },
    handlePrice(val) {
      this.$refs.price.toggle(false);
     this.conditionForm.price = val.value
     this.getData()
    },
    handleFilter(con) {
      if (!this.conditionForm.more.includes(con.value)) {
        this.conditionForm.more.push(con.value);
      } else {
        const index = this.conditionForm.more.findIndex(
          (item) => item === con.value
        );
        this.conditionForm.more.splice(index, 1);
      }
    },
    // 选择筛选
    confirm() {
      this.show = false;
    },
    // 清除
    clearDetail() {
      this.conditionForm.more = [];
    },
    // 请求数据
    handleClose() {
      this.getData();
    },
    async getData() { 
      this.houseList = [];
      this.loading = true;
      this.conditionForm.more = this.conditionForm.more.join(",");
      this.showLoading = true
      const res = await getHouseList(this.conditionForm);
      this.showLoading  = false
      this.loading = false
      this.conditionForm.more = this.conditionForm.more.split(",");
      if(!res.body.list.length){
        this.$toast('暂无数据')
        this.loading = false
      }
      this.houseList = res.body.list;
    },
  },
};
</script>

<style lang="less" scoped>
.left {
  width: 270px;
  height: 40px;
  display: flex;
  border-radius: 7px;
  align-items: center;
  overflow: hidden;
}
.search {
  display: flex;
  align-items: center;
  height: 60px;
  background-color: #21b98a;
}
.active {
    color: #21b97a;
    background-color: #defaef;
    border: 1px solid #21b97a !important;
  }
  .header {
    color: #333333;
    font-size: 15px;
    height: 45px;
    line-height: 45px;
    padding-left: 10px;
    margin-bottom: 10px;
  }
  .group {
    margin: 0 50px;
    margin-right: 10px;
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #ccc;
    .item {
      width: 70px;
      height: 34px;
      margin-right: 25px;
      margin-bottom: 18px;
      border: 1px solid #ddd;
      font-size: 12px;
      color: #888888;
      text-align: center;
      line-height: 34px;
    }
    &:last-child {
      border: none;
    }
  }
  .content {
    .footer {
      width: 100%;
      height: 50px;
      display: flex;
      background-color: #fff;
      div {
        width: 50%;
        z-index: 999;
        height: 50px;
        line-height: 50px;
        text-align: center;
      }
      .cancel {
        background-color: #fff;
        color: #00c178;
      }
      .confirm {
        background-color: #00c178;
        color: #fff;
      }
    }
  }

.loading {
  position: absolute;
  top: 50%;
  left: 40%;
}
</style>
